﻿@page "/chart/smart-axis-labels"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.DropDowns
@using PointRender

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows internet users across different counties using smart labels in the chart. The smart label positioning for a series can be shown when it contains more points.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how the axis labels are arranged and how the axis label is smartly trimmed. If the axis labels overlap on the basis of the size of the chart and the size of the label, the <code>LabelIntersectAction</code> property of the axis can be used to avoid overlapping.</p>
    <p>The chart supports the following which you can set using the <code>LabelIntersectAction</code> property.</p>
    <ul>
        <li><code>Hide</code> - Hide the label when it intersect.</li>
        <li><code>Trim</code> - Trim the label when it intersect.</li>
        <li><code>Wrap</code> - Wrap the label when it intersect.</li>
        <li><code>MultipleRows</code> - Arrange the label in multiple row when it intersect.</li>
        <li><code>Rotate45</code> - Rotate the label to 45 degree when it intersect.</li>
        <li><code>Rotate90</code> - Rotate the label to 90 degree when it intersect.</li>
        <li><code>None</code> - Shows all the labels.</li>
    </ul><br>
    <p>The chart supports three types of edge labels placement that can be set using the <code>EdgeLabelPlacement</code> property.</p>
    <ul>
        <li><code>None</code> - No action will be performed.</li>
        <li><code>Hide</code> - Edge label will be hidden .</li>
        <li><code>Shift</code> - Shifts the edge labels.</li>
    </ul>
    <p>More information on the smart axis labels can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/axis-labels/#smart-axis-labels'>documentation section</a>.</p>
</ActionDescription>

<div class="col-md-7 control-section sb-property-border">
    <SfChart Title="Internet Users in Millons">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis EdgeLabelPlacement="@LabelPlacement" LabelPosition="@LabelPosition" MaximumLabelWidth="@LabelWidth" EnableTrim="@EnableTrim" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1" LabelIntersectAction="@IntersectAction">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisLabelStyle Size="0px"></ChartAxisLabelStyle>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Country" YName="User" Name="Users" Opacity="1" Width="2" Type="ChartSeriesType.Column">
                <ChartMarker>
                    <ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Top">
                        <ChartDataLabelFont Color="#ffffff" FontWeight="600"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartEvents OnPointRender="PointRender"></ChartEvents>
    </SfChart>
</div>

<div class="col-lg-5 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table title="Properties" style="width: 100%">
                <tr style="height: 50px">
                    <td style="width: 40%">
                        <div>Intersect Action:</div>
                    </td>
                    <td style="width: 60%;">
                        <SfDropDownList TValue="string" TItem="DropDownData" Placeholder="Hide" DataSource="@InterSectAction">
                            <DropDownListEvents TValue="string" TItem="DropDownData" ValueChange="ChangeIntersectAction"></DropDownListEvents>
                            <DropDownListFieldSettings Value="Type"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </td>
                </tr>
                <tr style="height: 50px">
                    <td style="width: 60%">
                        <div>Edge Label Placement:</div>
                    </td>
                    <td style="width: 40%;">
                        <SfDropDownList TValue="string" TItem="DropDownData" Placeholder="None" DataSource="@EdgePlacement">
                            <DropDownListEvents TValue="string" TItem="DropDownData" ValueChange="ChangeLabelPlacement"></DropDownListEvents>
                            <DropDownListFieldSettings Value="Type"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </td>
                </tr>
                <tr style="height: 50px">
                    <td style="width: 60%">
                        <div>Label Position:</div>
                    </td>
                    <td style="width: 40%;">
                        <SfDropDownList TValue="string" TItem="DropDownData" Placeholder="Outside" DataSource="@PositionLabel">
                            <DropDownListEvents TValue="string" TItem="DropDownData" ValueChange="ChangeLabelPosition"></DropDownListEvents>
                            <DropDownListFieldSettings Value="Type"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </td>
                </tr>
                <tr style="height: 50px">
                    <td style="width: 60%">
                        <div>Enable Trim:</div>
                    </td>
                    <td style="width: 40%;">
                        <div>
                            <SfCheckBox Checked="@IsTrim" ValueChange="@ChangeSelection" TChecked="bool"></SfCheckBox>
                        </div>
                    </td>
                </tr>
                <tr style="height: 50px">
                    <td style="width: 60%">
                        <div>Maximum Label Width:</div>
                    </td>
                    <td style="width: 40%;">
                        <div style='margin-top: 0px;'>
                            <SfNumericTextBox TValue="int?" Value="@Width" Max=120 Min=1 Step=1>
                                <NumericTextBoxEvents TValue="int?" ValueChange="ChangeValue" />
                            </SfNumericTextBox>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

@code{

    private Boolean EnableTrim = false, IsTrim = false;
    private int LabelWidth = 34, Width = 34;
    private LabelIntersectAction IntersectAction = LabelIntersectAction.Hide;
    private EdgeLabelPlacement LabelPlacement = EdgeLabelPlacement.None;
    private AxisPosition LabelPosition = AxisPosition.Outside;
    private Theme Theme { get; set; }
    public List<DropDownData> InterSectAction { get; set; } = new List<DropDownData>
    {
        new DropDownData() { Type = "Hide" },
        new DropDownData() { Type = "Trim" },
        new DropDownData() { Type = "Wrap" },
        new DropDownData() { Type = "MultipleRows" },
        new DropDownData() { Type = "Rotate45" },
        new DropDownData() { Type = "Rotate90" },
        new DropDownData() { Type = "None" },
    };
    public List<DropDownData> EdgePlacement { get; set; } = new List<DropDownData>
    {
        new DropDownData() { Type = "None" },
        new DropDownData() { Type = "Shift" },
        new DropDownData() { Type = "Hide" },
    };
    public List<DropDownData> PositionLabel { get; set; } = new List<DropDownData>
    {
        new DropDownData() { Type = "Outside" },
        new DropDownData() { Type = "Inside" },
    };
    public List<CategoryData> ChartPoints { get; set; } = new List<CategoryData>
    {
        new CategoryData { Country = "South Korea", User = 39 },
        new CategoryData { Country = "India", User = 61 },
        new CategoryData { Country = "Pakistan", User = 20 },
        new CategoryData { Country = "Germany", User = 65 },
        new CategoryData { Country = "Australia", User = 16 },
        new CategoryData { Country = "Italy", User = 29 },
        new CategoryData { Country = "France", User = 45 },
        new CategoryData { Country = "United Arab Emirates", User = 10 },
        new CategoryData { Country = "Russia", User = 41 },
        new CategoryData { Country = "Mexico", User = 31 },
        new CategoryData { Country = "Brazil", User = 76 },
        new CategoryData { Country = "China", User = 51 },
     };

    protected override void OnInitialized()
    {
        this.SetTheme(null);
    }

    public void PointRender(PointRenderEventArgs args)
    {
        this.SetTheme(args);
    }

    private void SetTheme(PointRenderEventArgs args)
    {
        if (NavigationManager.Uri.IndexOf("material") > -1)
        {
            if (args == null)
                Theme = Theme.Material;
            else
                args.Fill = PointColor.MaterialColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("fabric") > -1)
        {
            if (args == null)
                Theme = Theme.Fabric;
            else
                args.Fill = PointColor.FabricColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("bootstrap") > -1)
        {
            if (args == null)
                Theme = Theme.Bootstrap;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("highcontrast") > -1)
        {
            if (args == null)
                Theme = Theme.HighContrast;
            else
                args.Fill = PointColor.HighContrastColors[args.Point.Index % 10];
        }
        else
        {
            if (args == null)
                Theme = Theme.Bootstrap4;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
    }

    public void ChangeSelection(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        EnableTrim = IsTrim = args.Checked;
    }

    public void ChangeValue(Syncfusion.Blazor.Inputs.ChangeEventArgs<int?> args)
    {
        LabelWidth = Width = Convert.ToInt32(args.Value);
    }

    public void ChangeIntersectAction(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropDownData> args)
    {
        IntersectAction = (LabelIntersectAction)Enum.Parse(typeof(LabelIntersectAction), args.Value.ToString(), true);
    }

    public void ChangeLabelPlacement(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropDownData> args)
    {
        LabelPlacement = (EdgeLabelPlacement)Enum.Parse(typeof(EdgeLabelPlacement), args.Value.ToString(), true);
    }

    public void ChangeLabelPosition(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropDownData> args)
    {
        LabelPosition = (AxisPosition)Enum.Parse(typeof(AxisPosition), args.Value.ToString(), true);
    }

    public class DropDownData
    {
        public string Type { get; set; }
    }

    public class CategoryData
    {
        public string Country { get; set; }
        public double User { get; set; }
    }

}
